<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="stylesheets/demo.css">
	
	<script src = 'jquery-1.11.2.js'></script>
	 <script src = 'demo.js'></script>
</head>
<body>
	<div id="header">
		<div class = "logo">
			<img src="images/logo.png" alt="logo">
		</div>
		<ul class = "r-link clearfix">
			<li><a href="">课程</a></li>
			<li><a href="">问答</a></li>
			<li><a href="">我的课程</a></li>
		</ul>
		<div class="l-link">
			<form action="get">
				<input type="text" placeholder = "搜索课程、问答">
				<a href="#" name = "search"></a>
			</form>
			<a href="#" class = "mes mes1" title = "我的消息"><img src="images/icon_msg.png" alt="message"></a>
			<a href="#" class = "mes mes2"><span>经验</span>
			<span class = "count">2493</span></a>
			<div  class = "mes mes3">
				<a href="#"><span></span></a>
			<ul class = "set">
				<li><a href="#">用户</a></li>
				<li><a href="#"><span class = "logo-set myset"></span>我的设置</a></li>
				<li><a href="#"><span class = 'logo-set exit'></span>退出</a></li>
			</ul>
			</div>
		</div>
	</div>
	<div id="container">
		<div class = "top-link clearfix">
			<ul>
				<li class = "top-nav"><a href="">慕课发现</a></li>
				<li class = "top-nav"><a href="">全部课程</a></li>
				<li class = "top-nav"><a href="">学习计划</a></li>
				<li class = "top-nav"><a href="">顶尖分享</a></li>
			</ul>
		</div>
		<div class = "content">
			<div class = "course-nav">
				<ul>
					<li class = "course-nav-list course-nav-list1" style = "border-left:2px solid red;"><a href="javascript:;" style = "color:red">全部</a></li>
					<li class = "course-nav-list"><a href="javascript:;">前端开发<span>&gt</span></a>
						<!-- <ul class = "first-nav">
							<li><a href="#">HTML/CSS</a></li>
							<li><a href="#">javascript</a></li>
							<li><a href="#">Css3</a></li>
							<li><a href="#">Html5</a></li>
							<li><a href="#">jQuery</a></li>
							<li><a href="#">AngularJS</a></li>
							<li><a href="#">Node.js</a></li>
							<li><a href="#">Bootsshap</a></li>
							<li><a href="#">webApp</a></li>
							<li><a href="#">前段工具</a></li>
						</ul> -->
					</li>
					<li class = "course-nav-list"><a href="javascript:;">后端开发<span>&gt</span></a></li>
					<li class = "course-nav-list"><a href="javascript:;"style = "border:none;">移动开发<span>&gt</span></a></li>
					<li class = "course-nav-list"><a href="javascript:;"style = "border:none;">数据处理<span>&gt</span></a></li>
					<li class = "course-nav-list"><a href="javascript:;"style = "border:none;">图像处理<span>&gt</span></a></li>
				</ul>
			</div>
			<div class = "course-content">
				<div class = "content-head clearfix">
					<span>全部</span>
					<a href="#" class = "set-pic-f">最受欢迎</a>
					<a href="#" class = "set-pic">最新上线</a>
					<div  class = "filter">
						<a href="#" class = "set-pic"></a>
						<div class = "content-sel">
							<p>难度帅选</p>
							<ul>
								<li><a href="javascript:;">不限</a></li>
								<li><a href="javascript:;">初级</a></li>
								<li><a href="javascript:;">中级</a></li>
								<li><a href="javascript:;">高级</a></li>
							</ul>
							<a href="javascript:;" class = "sel-dis"><span></span>不显示已学课程</a>
						</div>
					</div>
					
				</div>
				<a href="#" class = "filter"></a>
				<div class = "content-cont">
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>	
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
					<a href="javascript:;">
						<div class = "cont-img">
							<img src="images/1.jpg" alt="">
						</div>
						<div class = "cont-intro">
							<p>Android中的Http通信</p>
							<span class = "r">2天前更新</span>
							<span class = "l">341人学习</span>
						</div>
						<div class = "cont-hov">
							<p>Android中的Http通信</p>
							<span class = "h-r">2天前更新</span>
							<span class = "h-l">341人学习</span>
						</div>
					</a>
				</div>
			</div>
			<div class = 'foot-nav'>
				<a href="javascript:;" class = "weixin"><span></span></a>
				<a href="#" traget = "_blank" class = "tips"></a>
				<a href="#" traget = "self" class = "down"><span></span></a>
				<a href="javascript:;" class = "backtop" id = "backtop"></a>
			</div>
		</div>
	</div>
	<div id="footer"></div>
	<script>
	// KISSY.use('node,event',function (S,Node,Event) {
	// 	var $ = S.all,
	// 		event = S.Event;

	// 	var set = $('.set');

	// 	event.on('.mes3','mouseover',function () {
	// 			set.show();
	// 	})
	// 	event.on('.mes3','mouseout',function () {
	// 			set.hide();
	// 	})
	// })
 	$(function () {
		$('.mes3').mouseover(function () {
			$('.set').stop().slideDown('slow');

			$('.set li').mouseover(function () {
				$('.set li').css('background','#838B83');
				$(this).css('background','#d9d9d9');
			});
		});
		$('.mes3').mouseout(function () {
			$('.set').stop().slideUp('slow');
			$('.set li').mouseout(function () {
				$('.set li').css('background','#838B83');
			})
		});

		$('.l-link input').focus(function () {
			$(this).css('background','#fff');
		})
		$('.l-link input').blur(function () {
			$(this).css('background','#363c41');
		})

 		

		// $('.content-cont').mouseover(function () {
		// 	$('.cont-intro').stop().fadeOut('1000')
		// 	$('.cont-hov').stop().fadeIn('1000');
		// });
		// $('.content-cont').mouseout(function () {
		// 	$('.cont-intro').stop().fadeIn('1000');
		// 	$('.cont-hov').stop().fadeOut('1000');
		// });
	//给头部定位的代码
		window.onscroll = function () {
			var dis = $('.course-nav').offset().top;
			var pos = $('body').scrollTop();

			if(pos >= 119){
				$('.course-nav').addClass('nav-fixed');
				$('.content-head').addClass('cont-fixed');
			}else{
				$('.course-nav').removeClass('nav-fixed');
				$('.content-head').removeClass('cont-fixed');
			}
		}

		var btop = $('.backtop');
			
		// btop.click(function () {
		// 	var pos1 = $('body').scrollTop();
		// 	$('body').scrollTop() -= 200;
		// });
})
	</script>
</body>
</html>